<template>
  <div class="goods">
    <van-nav-bar left-text="返回" 
      @click-left="$router.back()" title="优购列表" />
    <my-search></my-search>

    <ul>
      <li class="title">
        <span :class="{active: checkIndex == 0}" @click="cut(0)">综合</span>
        <span :class="{active: checkIndex == 1}" @click="cut(1)">销量</span>
        <span :class="{active: checkIndex == 2}" @click="cut(2)">价格</span>
      </li>
      <li v-for="(item,index) in goodsList" :key="index">
        <img :src="item.goods_big_logo" alt="">
        <section>
          <h6>{{item.goods_name}}</h6>
          <p>￥{{item.goods_price}}</p>
        </section>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import mySearch from '../components/mySearch.vue';
import api from '../api/index';
import { useRoute } from 'vue-router';
export default {
  components: { mySearch },
  setup() {
    const { params } = useRoute();
    const data = reactive({
      savelist:[], // 原始数据
      goodsList:[], // 商品的数据
      checkIndex: 0
    })
    api.get(`/goods/search?cid=${params.id}`).then(res => {
      data.goodsList = res.message.goods;
      data.savelist = JSON.parse(JSON.stringify(res.message.goods));
    })
    const cut = (val) => {
      data.checkIndex = val;
      if (val == 0){
        // JSON.parse(JSON.stringify()) 对象的深拷贝
        data.goodsList = JSON.parse(JSON.stringify(data.savelist));
      } else if(val == 1){
        data.goodsList.sort((a,b) => a.upd_time - b.upd_time);
      } else {
        data.goodsList.sort((a,b) => a.goods_price - b.goods_price);
      }
    }
    return {
      ...toRefs(data),
      cut
    }
  },
};

// let obj = {name:'张三'}
// let obj1 = obj;
// obj1.name = '张麻子'
// console.log(obj);
</script>
<style lang="scss" scoped>
.goods{
  height: 100%;
  ul{
    height: calc(100% - 85px);
    overflow: auto;
    .title{
      span{
        line-height: 40px;
        width: 33%;
        text-align: center;
        border-bottom: 2px solid transparent;
      }
      .active{
        border-color: red;
        color: red;
      }
    }
    li{
      display: flex;
      padding: 0 10px;
      box-sizing: border-box;
      margin-bottom: 10px;
      img{
        width: 80px;
        margin-right: 10px;
      }
      section{
        flex: 1;
        display: inline-flex;
        flex-wrap: wrap;
        align-content: space-between;
        p{
          color: red;
        }
      }
    }
  }
}
</style>
